<template>
  <el-dialog title="取消账单" :visible.sync="dialogVisible" width="600px">
    <div v-if="detail" class="dialog-content">
      <ul>
        <li>
          <div class="left">已支付</div>
          <div
            class="mid"
          >￥{{ (detail.order.totalFee-detail.order.discountFee-detail.order.pointsDiscountFee)/100 }}</div>
          <div class="right">{{ paymentKeyOptions[detail.order.paymentMethod] }}</div>
        </li>
        <template>
          <li v-if="detail.order.subStatus===9">
            <div class="left">房间费用</div>
            <div class="mid">￥{{ detail.order.totalFee/100 }}</div>
            <div class="right">{{ detail.order.bizData.beginDay }} ~ {{ detail.order.bizData.endDay }}</div>
          </li>
        </template>
        <li v-if="detail.order.subStatus===7&&detail.refundRecord">
          <div class="left">取消费用</div>
          <div
            class="mid"
          >{{ detail.refundRecord.cancelFee?'￥'+detail.refundRecord.cancelFee/100:'无' }}</div>
          <div class="right remark">{{ detail.refundRecord.remark }}</div>
        </li>
        <li v-if="detail.order.subStatus===7||detail.order.subStatus===8">
          <div class="left">取消原因</div>
          <div class="right remark">{{ detail.refundRecord.reason?detail.refundRecord.reason:'无' }}</div>
        </li>
        <li>
          <div class="left">合计</div>
          <div
            class="right"
          >￥{{ detail.refundRecord&&detail.refundRecord.refundFee?detail.refundRecord.refundFee/100:0 }}</div>
        </li>
        <li v-if="detail.refundRecord">
          <div class="left">结算</div>
          <div class="right">
            <span
              v-if="detail.refundRecord.refundStatus===0"
              class="app-text-color-danger"
            >{{ paymentKeyOptions[detail.refundRecord.refundMethod] }}退款￥{{ detail.refundRecord.refundFee/100 }}</span>
            <span v-if="detail.refundRecord.refundStatus===0" class="app-text-color-danger">中</span>
            <span v-if="detail.refundRecord.refundStatus===2" class="app-text-color-danger">失败</span>
            <span
              v-if="detail.refundRecord.refundStatus===1"
              class="app-text-color-success"
            >已{{ paymentKeyOptions[detail.refundRecord.refundMethod] }}退款￥{{ detail.refundRecord.refundFee/100 }}</span>
          </div>
        </li>
      </ul>
    </div>
    <div slot="footer" class="dialog-footer" align="center">
      <el-button size="mini" round @click="hide">关 闭</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  data() {
    return {
      dialogVisible: false,
      detail: ''
    }
  },
  computed: {
    ...mapGetters(['paymentKeyOptions']),
    shopId() {
      return this.filterForm.shopId
    }
  },
  mounted() {},
  methods: {
    open(detail) {
      this.detail = detail
      this.show()
      return new Promise((resolve, reject) => {
        this.resolve = resolve
        this.reject = reject
      })
    },

    show() {
      this.dialogVisible = true
    },

    hide() {
      this.dialogVisible = false
    }
  }
}
</script>

<style scoped lang="scss">
  li {
    display: flex;
    align-items: flex-start;
    padding: 10px 0;
    border-bottom: 1px solid #e7e7e7;
    .left {
      flex: 0 0 auto;
      width: 120px;
      font-weight: bold;
    }
    .mid:nth-child(2) {
      flex: 0 0 auto;
      width: 120px;
    }
    .right:nth-child(3) {
      flex: 1 1 auto;
    }
  }
</style>

